import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import { Col, Row, Card } from 'antd';
import React from 'react';
import { Line } from '@ant-design/charts';

const { Statistic } = StatisticCard;

const Dashboard: React.FC = () => {
  // 模拟数据
  const userRegistrationData = [
    { date: '2023-01', value: 120 },
    { date: '2023-02', value: 150 },
    { date: '2023-03', value: 180 },
    { date: '2023-04', value: 220 },
    { date: '2023-05', value: 250 },
    { date: '2023-06', value: 300 },
  ];

  const activeUserData = [
    { date: '2023-01', value: 80 },
    { date: '2023-02', value: 100 },
    { date: '2023-03', value: 120 },
    { date: '2023-04', value: 150 },
    { date: '2023-05', value: 180 },
    { date: '2023-06', value: 220 },
  ];

  const config = {
    data: userRegistrationData,
    xField: 'date',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  const activeUserConfig = {
    data: activeUserData,
    xField: 'date',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  return (
    <PageContainer>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <ProCard>
            <Statistic title="用户总数" value={1250} />
          </ProCard>
        </Col>
        <Col span={8}>
          <ProCard>
            <Statistic title="商家总数" value={85} />
          </ProCard>
        </Col>
        <Col span={8}>
          <ProCard>
            <Statistic title="作品总数" value={3680} />
          </ProCard>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={12}>
          <Card title="用户注册趋势">
            <Line {...config} />
          </Card>
        </Col>
        <Col span={12}>
          <Card title="活跃用户趋势">
            <Line {...activeUserConfig} />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Dashboard; 